﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        #optionsBox
        {
            width: 100%;
            background-color: rgb(153, 170, 187);
        }
        #optionsBoxContent
        {
            text-align: left;
            background-color: rgb(153, 170, 187);
            color: White;
            padding: 5px;
        }
        #optionsBoxContent h3
        {
            margin: 0;
            color: White;
        }
        #box1
        {
            position: relative;
            float: left;
            width: 50%;
        }
        #box2
        {
            position: relative;
            float: left;
            width: 50%;
        }
        body
        {
            margin: 0;
            padding: 0; /*font-family: georgia, times, "times new roman", serif;
			color: #000;
            background-color: #F1F2E1;*/
        }
        #container
        {
            /*margin: 1em 5%;*/ /*background-color: #FFF;*/ /*background-image:  url(images/background.jpg);*/ /*background-repeat: repeat-y;*/ /*border: 1px solid #333;*/
        }
        #banner
        {
            /*background-color: #666;*/ /*border-bottom: 1px solid #333;*/
        }
        #banner h1
        {
            margin: 0;
            padding: .5em;
        }
        #banner h2
        {
            padding: .5em;
            color: #decba0; /* Darker Beige */
            font-weight: normal;
        }
        #nav
        {
            float: right;
            width: 250px;
        }
        #nav-content
        {
            margin-right: 10px;
            margin-left: 10px;
            padding-top: 1em; /*color: White;*/
        }
        #nav p
        {
            margin-top: 0;
        }
        #left
        {
            padding-top: 1em;
            margin: 0 250px 0 0;
        }
        #left-content
        {
            margin: 0 2em 0 .5em;
        }
        #content h2
        {
            margin-top: 0;
        }
        #footer
        {
            clear: both; /*background-color: #666;*/
            padding: 1em; /*text-align: right;*/ /*border-top: 1px solid #333;*/
        }
        .homeSidebarAvatar
        {
        	float:left;
        	/*border: solid 1px Black;*/
        	background-color: Black;
        	height: 50px;
        	width: 50px;
        }        
        .sidebarContent
        {
        	margin-left:50px;
        	padding: 0 10px 0 10px;
        	min-height:50px;
        	/*background-color:Black;*/
            color: #848a73;
            font-size: 1.2em;
        }
        .sidebarPadding
        {
        	border-top: solid 1px #decba0; /* Darker Beige Border*/
        	padding: 5px 0 5px 0;
        }
        #sidebarTitle
        {        	
        	color: #7a7368; /* Dark Grey Title color */
        	font-weight:bolder;
        	font-size:1.5em;
        	padding-bottom:10px;
        }
        .name
        {
        	font-weight:bold;
        }
        .iAvatar
        {
        	visibility:hidden;
        }
    </style>
</asp:Content>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <div id="container">
        <div id="banner">
            <h1>
                Welcome, is this your first time visiting myStack?
           </h1>                     
        </div>
        <div id="nav">
            <div id="nav-content">
                <% MyStack.Models.StoriesView item = ViewData["latest"] as MyStack.Models.StoriesView; %>
                <div id="sidebarTitle"><%= Html.Encode(item.Title)%></div>
                <div class="clear"></div>
                <!-- Do not format this. All of it must be one line to remove spacing. It's an HTML thing!-->
                <div class="sidebarPadding">
                    <div class="homeSidebarAvatar">
                        <img alt="avatar" class="iAvatar" onload="imageResize(50, 'ncIndexAvatar1');" id="ncIndexAvatar1" src='<%= Url.Action("Show", "Image", new { id=item.ActingUserId }) %>' />
                    </div>
                    <div class="sidebarContent">
                        The Reader: <span class="name"><%= Html.Encode(item.ActingUser)%></span>
                    </div>
                </div>
                <div class="sidebarPadding">
                    <div class="homeSidebarAvatar">
                        <img alt="avatar" class="iAvatar" onload="imageResize(50, 'ncIndexAvatar2');" id="ncIndexAvatar2" src='<%= Url.Action("Show", "Image", new { id=item.SourceUserId }) %>' />
                    </div>
                    <div class="sidebarContent">
                        The Owner: <span class="name"><%= Html.Encode(item.SourceUser)%></span>
                    </div>
                </div>
                <div class="sidebarPadding">
                    <div class="homeSidebarAvatar">
                        <img alt="avatar" class="iAvatar" onload="imageResize(50, 'ncIndexAvatar3');" id="ncIndexAvatar3" src='<%= Url.Action("Show", "Image", new { id=item.AuthorId }) %>' />
                    </div>
                    <div class="sidebarContent">
                        The Creator: <span class="name"><%= Html.Encode(item.Author)%></span>
                    </div>
                </div>
                <div class="sidebarPadding"></div>                
                <div class="clear"></div>             
            </div>
        </div>
        <div id="left">
            <div id="left-content">
                <div id="optionsBox" class="rounded2">
                    <div id="optionsBoxContent">
                        <div id="box1" class="box">
                            <div style="margin: 0 .5em 0 .25em">
                                <h3>
                                    Explore
                                    <a href=""><img src="/Content/icon_magnifier_50_x_50.png" style="visibility:visible;"alt="smiley_face" width="50" height="50" /></a></h3>
                                <br />
                                At myStack, we make it easy for you to explore the latest news stories according
                                to people like you. But you won't be able to pop that story until you <a class="lightLink"
                                    href="/Account/Register">Register</a>. So do it now!
                            </div>
                        </div>
                        <div id="box2" class="box">
                            <div style="margin: 0 .25em 0 .5em">
                                <h3>
                                    Share
                                    <img src="/Content/icon_smiley_50_x_50.png" alt="smiley_face" width="50" height="50" /></h3>
                                <br />
                                Not only can you view stories that other people post, but once you've <a class="lightLink"
                                    href="/Account/LogOn">Logged In</a>, you can also post your own stories.
                            </div>
                        </div>
                        <div class="clear">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            <p>
                To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
                    http://asp.net/mvc</a>.
            </p>
        </div>
    </div>
</div>
</asp:Content>
